<template>
  <div id="producerProductsInfo">
    <topBar></topBar>
    <div class="container my-5">
      <div
        class="
          row
          p-4
          pb-0
          pe-lg-0
          pt-lg-5
          align-items-center
          rounded-3
          border
          shadow-lg
        "
      >
        <div class="row gx-2 gx-lg-3">
          <div class="col-sm-6 col-lg-4 mb-3 mb-lg-5">
            <productCard :cate="name" :date="date" :price="price" :priceChange='priceChange' :origin='origin' v-if="name"></productCard>
          </div>
          <div class="col-sm-6 col-lg-8 mb-4 mb-lg-5">
            <priceChanges :cate="name" v-if="name"></priceChanges>
          </div>
        </div>
      </div>
    </div>
    <div class="container my-5">
      <div
        class="
          row
          p-4
          pb-0
          pe-lg-0
          pt-lg-5
          align-items-center
          rounded-3
          border
          shadow-lg
        "
      >
        <div class="row gx-2 gx-lg-3">
          <div class="col-sm-6 col-lg-8 mb-3 mb-lg-5">
            <originPriceMap :cate="name" v-if="name"></originPriceMap>
          </div>
          <div class="col-sm-6 col-lg-4 mb-3 mb-lg-5">
            <originPriceData :cate="name" v-if="name"></originPriceData>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topBar from "@/components/government/topBar";
import priceChanges from "@/components/charts_t/priceChanges";
import originPriceMap from "@/components/charts_t/originPriceMap";
import originPriceData from "@/components/charts_t/originPriceData";
import productCard from "@/components/util/productCard";
export default {
  data() {
    return {
      name: "",
      date: "",
      price: "",
      priceChange:'',
      origin:'',
    };
  },
  components: {
    topBar: topBar,
    priceChanges: priceChanges,
    originPriceMap: originPriceMap,
    originPriceData: originPriceData,
    productCard: productCard,
  },
  mounted() {
    this.name = this.$route.query.name;
    this.date = this.$route.query.date;
    this.price = this.$route.query.price;
    this.priceChange = this.$route.query.priceChange;
    this.origin = this.$route.query.origin;
  },
};
</script>